<div class="panel panel-default" >
    <div class="panel-heading">
       <div class="row">
            <div class="col-md-12">
                <div class="pull-left" >
                   <table >
                       <tr> 
                            <td><b><span translate>SD Files</span></b></td>
                            <td>&nbsp;&nbsp;</td>
                            <td>
                             <button id="files_createdir_btn" onclick="files_Createdir()" class="btn btn-info btn-xs hide_it" style="padding: -2px 2px 0x 0px;">
                                <svg width="1.5em" height="1.2em" viewBox="5 10 30 10">
                                    <rect x="5" y="10" width="30" height="20" rx="2" ry="2" fill="currentColor" />
                                    <rect x="20" y="5" width="15" height="15" rx="2" ry="2" fill="currentColor" />
                                    <text x="15" y="25" font-size="18"  font-weight="800"  fill="#5BC0DE">+</text>
                                </svg>
                            </button>
                            </td>
                            <td>&nbsp;&nbsp;</td>
                            <td><span id="files_currentPath" ></span></td>
                            <td>&nbsp;&nbsp;</td>
                            <td><div id="files_nav_loader" style="width:1em;height:1em" class="loader hide_it"></div></td>
                        <tr>
                    </table>
                </div>
                <div class="hide_it pull-right" id="files_uploading_msg">
                    <table>
                        <tr>
                            <td><span translate>Uploading </span></td>
                            <td>&nbsp;</td>
                            <td><span class="text-info" id="files_currentUpload_msg"></span></td>
                            <td>&nbsp;</td>
                            <td width='100px'><progress name='prg' id='files_prg' max='100'></progress></td>
                            <td><span id="files_percent_upload"></span>%</td>
                        </tr>
                    </table>
                </div>
                <div class="pull-right" id="files_navigation_buttons">
                    <button class="btn btn-xs btn-primary"  onclick="files_filter_button(this);">
                        <span  id="files_filter_glyph" style="position:relative; top:2px">
                            <svg width='1.3em' height='1.2em' viewBox='0 0 1300 1200'>
                                <g transform='translate(50,1200) scale(1, -1)'>
                                    <path  fill='currentColor' d='M150 1200h900q21 0 35.5 -14.5t14.5 -35.5t-14.5 -35.5t-35.5 -14.5h-900q-21 0 -35.5 14.5t-14.5 35.5t14.5 35.5t35.5 14.5zM700 500v-300l-200 -200v500l-350 500h900z' />
                                </g>
                            </svg>
                        </span>
                    </button>
                    <button class="btn btn-xs btn-primary hide_it" id="files_refresh_btn"  onclick="files_refreshFiles(files_currentPath)" translate>Refresh</button>
                    <button class="btn btn-xs btn-primary hide_it" id="files_refresh_primary_sd_btn"  onclick="files_refreshFiles(primary_sd)" >SD 1</button>
                    <button class="btn btn-xs btn-primary hide_it" id="files_refresh_secondary_sd_btn"  onclick="files_refreshFiles(secondary_sd)" >SD 2</button>
                    <button class="btn btn-xs btn-primary" onclick="files_progress()" translate>Progress</button>
                    <button class="btn btn-xs btn-primary" onclick="files_abort()" translate>Abort</button>
                    <button class="btn btn-xs btn-primary" onclick="files_select_upload()"  translate>Upload</button>
                    <input type="file" id="files_input_file" onchange="files_check_if_upload()" accept=" .g, .gco, .gcode, .G, .GCO, .GCODE" style="display:none" />
                </div>
            </div>
        </div>
    </div>    
    <div class="panel-body panel-height panel-max-height panel-scroll">
        <div id="files_list_loader" class="loader hide_it" style="margin:auto"></div>
        <ul class="list-group" id="files_fileList">
        </ul>
    </div>
    <div class="panel-footer panel-footer-height">
         <div class="row hide_it" id="files_space_sd_status">
            <div class="col-md-12" >
               <div class="form-inline" >
                    <div class="form-group">
                         <span ><span translate>Total:</span>&nbsp;<span id="files_sd_status_total"></span></span> 
                         <span >&nbsp;|&nbsp;</span>
                         <span ><span translate>Used:</span>&nbsp;<span id="files_sd_status_used"> </span></span> 
                         <span >&nbsp;</span>
                        <span class="noshowonlowres">| &nbsp;</span>
                        <span class="form-inline" >
                                <div class="form-group">
                                    <span><span translate>Ocupation:</span>
                                    <meter id="files_sd_status_occupation" style='width:150px' min='0' max='100' high='90' value=50></meter></span>
                                    <span  id="files_sd_status_percent"></span><span>%</span>
                                </div>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="row hide_it" id="files_status_sd_status">
            <div class="col-md-12" >
                <span id="files_sd_status_msg">Ok</span>
            </div>    
        </div>
    </div>
</div>
